<template>
  <div class="relative">
    <slot :expand="expandVal"> </slot>
    <div
      v-if="showExpand"
      class="absolute bottom-[-8px] bg-[#EAF3FF] border border-[var(--base-border-color)] left-[50%] translate-x-[-50%] w-[100%] h-[16px] inline-flex items-center justify-center cursor-pointer i-[99] text-[#3487FF] text-[12px] pt-[2px]"
      @click="handleExpand"
    >
      {{ expandVal ? "收起" : "展开" }} ({{ length }})
      <svg-icon icon-class="arrow_down" @click="delSku(index)" :class="{ 'rotate-[180deg]': expandVal }" />
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(["change", "update:expand"])
const props = defineProps({
  showExpand: {
    type: Boolean,
    default: false,
  },
  expand: {
    type: Boolean,
    default: false,
  },
  length: {
    type: Number,
    default: 0,
  },
})

const expandVal = ref(false)

watch(
  () => props.expand,
  (val) => {
    expandVal.value = val
  }
)

const handleExpand = () => {
  expandVal.value = !expandVal.value
  emit("change")
  emit("update:expand", expandVal.value)
}
</script>
